<template>
  <MainLayout>
    <template #header>
      <AppHeader />
    </template>

    <template #content>
      <div class="tab-content">
        <!-- 根据当前Tab显示不同内容 -->
        <router-view />
      </div>
    </template>

    <template #footer>
      <NavFooter />
    </template>
  </MainLayout>
</template>

<script>
import { onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import MainLayout from "../../components/layout/MainLayout.vue";
import AppHeader from "../../components/navigation/AppHeader.vue";
import NavFooter from "../../components/navigation/NavFooter.vue";
import TabBar from "../../components/navigation/TabBar.vue"; // 添加的标签栏组件

import { useUserStore } from "../../store/modules/user"; // 导入 Pinia store
import useAppStore from "../../store/modules/app";

export default {
  components: {
    MainLayout,
    AppHeader,
    NavFooter,
  },
  setup() {
    const userStore = useUserStore(); // 使用 Pinia store
    const appStore = useAppStore();
    const router = useRouter();

    // 确保登录状态
    onMounted(() => {
      if (!userStore.isAuthenticated) {
        router.push("/login");
      }
    });

    // 响应Tab变化
    watch(
      () => appStore.currentTab, // 需要先实现这个状态
      (newTab) => {
        const routeMap = {
          session: "/main/session",
          chat: "/main/chat",
          discover: "/main/discover",
          profile: "/main/profile",
        };
        if (newTab in routeMap) {
          let tab = routeMap[newTab];
          console.log("tab:", tab);
          router.push(tab);
        }
      },
      { immediate: true }
    );

    return {};
  },
};
</script>
<style scoped>
/* 在 MainView.vue 中添加 */
.tab-content {
  flex: 1; /* 关键 - 占据剩余空间 */
  overflow-y: auto; /* 添加滚动条 */
  padding: 16px;
  background-color: #f7f9fc;
}
</style>
